<template>
  <div>
    <el-upload v-if="canUpload"
               class="avatar-uploader el-upload--text"
               :action="uploadUrl"
               :headers="{ token: getToken() }"
               :data="uploadData"
               :show-file-list="false"
               accept=".mp4"
               :on-success="handleVideoSuccess"
               :before-upload="beforeUploadVideo"
               :on-progress="uploadVideoProcess">
      <el-progress v-if="videoFlag === true"
                   type="circle"
                   :percentage="videoUploadPercent"
                   class="video-progress"></el-progress>
      <template v-if="!videoFlag">
        <el-button class="video-btn"
                   slot="trigger"
                   icon="el-icon-caret-right"
                   size="small"
                   type="primary"
                   plain
                   circle></el-button>
        <span slot="trigger">选择视频</span>
      </template>
    </el-upload>
    <template v-if="dataObj.urls">
      <div v-for="(item, key) in dataObj.urls"
           :key="key"
           class="upload-video">
        <video :src="item.url"
               class="avatar video-avatar"
               controls="controls">您的浏览器不支持视频播放</video>
        <el-button v-if="canUpload"
                   @click="deleteVideo(key)"
                   class="video-delete"
                   type="danger"
                   size="mini"
                   icon="el-icon-close"
                   circle></el-button>
      </div>
    </template>
  </div>
</template>

<style lang="scss">
.el-progress-circle {
  margin-top: 3px;
  width: 80px !important;
  height: 80px !important;
}
.avatar-uploader .el-upload--text {
  height: 89px;
  margin-bottom: 10px;
  & > .el-button {
    position: relative;
    top: 16px;
    left: 26px;
  }
  & > span {
    position: relative;
    top: 52px;
    right: 15px;
  }
}
.upload-video {
  display: inline-block;
  margin: 0 10px 0 5px;
}
.el-upload__input {
  display: none !important;
}
.avatar-uploader .el-upload {
  border: 1px dashed #58a3f3;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.video-avatar {
  width: 325px !important;
  height: 200px !important;
}
.video-delete {
  position: relative;
  bottom: 213px;
  left: 310px;
}
</style>

<script>
import '@/style/common.scss'
import '@/style/info.scss'
import { api } from '@/api'
import { quillEditor } from 'vue-quill-editor'
import { devBaseURL } from '@/utils/http'
import { HTTPSUCCESS, HTTPDATAFAIL, HTTPPARAMFAIL, HTTPUNKOWNFAIL } from '@/components/constant'
import { getToken } from '@/utils/auth'

export default {
  data() {
    return {
      uploadUrl: devBaseURL + 'sys/info/video/upload',
      videoFlag: false,
      videoUploadPercent: ''
    }
  },
  watch: {
  },
  props: {
    uploadData: {
      type: Object,
      default: () => { return { videoName: 'video/default' } }
    },
    dataObj: {
      type: Object,
      default: () => { return {} }
    },
    canUpload: {
      type: Boolean,
      default: false
    }
  },
  components: {},
  created() {
  },
  methods: {
    getToken,
    // 上传前回调
    beforeUploadVideo(file) {
      const isLt20M = file.size / 1024 / 1024 < 20
      if (['video/mp4'].indexOf(file.type) === -1) { // 'video/ogg', 'video/flv', 'video/avi', 'video/wmv', 'video/rmvb'
        this.$message.error('请上传正确的视频格式')
        return false
      }
      if (!isLt20M) {
        this.$message.error('上传视频大小不能超过20MB哦!')
        return false
      }
    },
    // 进度条
    uploadVideoProcess(event, file, fileList) {
      this.videoFlag = true
      this.videoUploadPercent = file.percentage.toFixed(0) * 1
    },

    // 上传成功回调
    handleVideoSuccess(response, file, fileList) {
      this.videoFlag = false
      this.videoUploadPercent = 0
      if (response.code === HTTPSUCCESS) {
        this.dataObj.urls.push(response.data.video)
        this.dataObj.names.push(response.data.video.name)
        this.$emit('update:dataObj', this.dataObj)
      } else {
        this.$message.error('视频上传失败，请重新上传！')
      }
    },
    deleteVideo(index) {
      this.dataObj.urls.splice(index, 1)
      this.dataObj.names.splice(index, 1)
      this.$emit('update:dataObj', this.dataObj)
    }
  }
}
</script>
